<template>
  <div class="levels-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🏆 会员等级管理</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增等级
          </el-button>
        </div>
      </template>

      <!-- 等级卡片展示 -->
      <el-row :gutter="20" class="level-cards">
        <el-col :xs="24" :sm="12" :md="6" v-for="level in levelList" :key="level.id">
          <el-card class="level-card" :class="'level-' + level.code">
            <div class="level-icon">
              <el-icon :size="48">
                <component :is="level.icon" />
              </el-icon>
            </div>
            <h3 class="level-name">{{ level.name }}</h3>
            <div class="level-info">
              <div class="info-item">
                <span class="label">消费门槛:</span>
                <span class="value">¥{{ level.minConsumption.toLocaleString() }}</span>
              </div>
              <div class="info-item">
                <span class="label">会员折扣:</span>
                <span class="value discount">{{ (level.discount * 10).toFixed(1) }}折</span>
              </div>
              <div class="info-item">
                <span class="label">积分倍率:</span>
                <span class="value">{{ level.pointsRate }}倍</span>
              </div>
              <div class="info-item">
                <span class="label">年费:</span>
                <span class="value">{{ level.annualFee > 0 ? '¥' + level.annualFee : '免费' }}</span>
              </div>
              <div class="info-item">
                <span class="label">会员数:</span>
                <span class="value count">{{ level.memberCount }}人</span>
              </div>
            </div>
            <div class="level-actions">
              <el-button type="primary" size="small" @click="handleEdit(level)">
                编辑
              </el-button>
              <el-button size="small" @click="handleViewMembers(level)">
                查看会员
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 等级权益详情 -->
      <el-card style="margin-top: 20px;">
        <template #header>
          <span>等级权益对比</span>
        </template>
        <el-table :data="levelList" border>
          <el-table-column prop="name" label="等级名称" width="150" />
          <el-table-column prop="minConsumption" label="消费门槛" width="120">
            <template #default="{ row }">
              ¥{{ row.minConsumption.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="discount" label="折扣" width="100">
            <template #default="{ row }">
              {{ (row.discount * 10).toFixed(1) }}折
            </template>
          </el-table-column>
          <el-table-column prop="pointsRate" label="积分倍率" width="100">
            <template #default="{ row }">
              {{ row.pointsRate }}倍
            </template>
          </el-table-column>
          <el-table-column prop="freeShipping" label="免费配送" width="100">
            <template #default="{ row }">
              <el-tag :type="row.freeShipping ? 'success' : 'info'" size="small">
                {{ row.freeShipping ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="birthdayGift" label="生日礼金" width="100">
            <template #default="{ row }">
              {{ row.birthdayGift > 0 ? '¥' + row.birthdayGift : '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="priorityService" label="优先客服" width="100">
            <template #default="{ row }">
              <el-tag :type="row.priorityService ? 'success' : 'info'" size="small">
                {{ row.priorityService ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="annualFee" label="年费" width="100">
            <template #default="{ row }">
              {{ row.annualFee > 0 ? '¥' + row.annualFee : '免费' }}
            </template>
          </el-table-column>
          <el-table-column prop="memberCount" label="会员数" width="100">
            <template #default="{ row }">
              <el-tag>{{ row.memberCount }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
              <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
      <el-form :model="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="等级名称">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等级编码">
              <el-input v-model="form.code" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="消费门槛">
              <el-input-number v-model="form.minConsumption" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成长值门槛">
              <el-input-number v-model="form.minGrowth" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="会员折扣">
              <el-input-number v-model="form.discount" :min="0.1" :max="1" :step="0.05" :precision="2" />
              <span style="margin-left: 10px;">{{ (form.discount * 10).toFixed(1) }}折</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="积分倍率">
              <el-input-number v-model="form.pointsRate" :min="1" :max="10" :step="0.5" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生日礼金">
              <el-input-number v-model="form.birthdayGift" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年费">
              <el-input-number v-model="form.annualFee" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="等级图标">
          <el-input v-model="form.iconName" placeholder="图标名称，如: Medal" />
        </el-form-item>

        <el-form-item label="等级颜色">
          <el-color-picker v-model="form.color" />
        </el-form-item>

        <el-form-item label="权益配置">
          <el-checkbox-group v-model="form.benefits">
            <el-checkbox label="freeShipping">免费配送</el-checkbox>
            <el-checkbox label="priorityService">优先客服</el-checkbox>
            <el-checkbox label="exclusiveDiscount">专属折扣</el-checkbox>
            <el-checkbox label="birthdayGift">生日礼物</el-checkbox>
            <el-checkbox label="pointsBonus">积分加成</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="等级描述">
          <el-input v-model="form.description" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, markRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Trophy, Medal, Star, StarFilled } from '@element-plus/icons-vue'

const levelList = ref([
  {
    id: 1,
    name: '普通会员',
    code: 'normal',
    minConsumption: 0,
    minGrowth: 0,
    discount: 1.0,
    pointsRate: 1,
    birthdayGift: 0,
    annualFee: 0,
    freeShipping: false,
    priorityService: false,
    memberCount: 8956,
    icon: markRaw(Star),
    color: '#909399'
  },
  {
    id: 2,
    name: '银卡会员',
    code: 'silver',
    minConsumption: 10000,
    minGrowth: 5000,
    discount: 0.95,
    pointsRate: 1,
    birthdayGift: 50,
    annualFee: 0,
    freeShipping: true,
    priorityService: false,
    memberCount: 3456,
    icon: markRaw(Trophy),
    color: '#c0c0c0'
  },
  {
    id: 3,
    name: '金卡会员',
    code: 'gold',
    minConsumption: 50000,
    minGrowth: 20000,
    discount: 0.90,
    pointsRate: 1.5,
    birthdayGift: 100,
    annualFee: 200,
    freeShipping: true,
    priorityService: true,
    memberCount: 1234,
    icon: markRaw(Medal),
    color: '#ffd700'
  },
  {
    id: 4,
    name: '钻石会员',
    code: 'diamond',
    minConsumption: 100000,
    minGrowth: 50000,
    discount: 0.85,
    pointsRate: 2,
    birthdayGift: 200,
    annualFee: 500,
    freeShipping: true,
    priorityService: true,
    memberCount: 456,
    icon: markRaw(StarFilled),
    color: '#b9f2ff'
  }
])

const dialogVisible = ref(false)
const dialogTitle = ref('新增等级')

const form = reactive({
  name: '',
  code: '',
  minConsumption: 0,
  minGrowth: 0,
  discount: 1.0,
  pointsRate: 1,
  birthdayGift: 0,
  annualFee: 0,
  iconName: 'Star',
  color: '#409eff',
  benefits: [],
  description: ''
})

const handleAdd = () => {
  dialogTitle.value = '新增等级'
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑等级'
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleViewMembers = (level) => {
  ElMessage.info(`查看${level.name}会员列表`)
}

const handleDelete = (row) => {
  if (row.memberCount > 0) {
    ElMessage.warning('该等级下还有会员，无法删除')
    return
  }
  ElMessageBox.confirm('确定要删除该等级吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleSubmit = () => {
  ElMessage.success('保存成功')
  dialogVisible.value = false
}
</script>

<style scoped>
.levels-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.level-cards {
  margin-bottom: 20px;
}

.level-card {
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.level-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.level-normal {
  border-top: 4px solid #909399;
}

.level-silver {
  border-top: 4px solid #c0c0c0;
}

.level-gold {
  border-top: 4px solid #ffd700;
}

.level-diamond {
  border-top: 4px solid #b9f2ff;
}

.level-icon {
  margin: 20px 0;
  color: #409eff;
}

.level-name {
  margin: 15px 0;
  font-size: 20px;
  color: #303133;
}

.level-info {
  margin: 20px 0;
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #ebeef5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #909399;
  font-size: 14px;
}

.value {
  font-weight: bold;
  color: #303133;
}

.value.discount {
  color: #f56c6c;
}

.value.count {
  color: #409eff;
}

.level-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
</style>

